<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../../../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <input type="text" v-model="mes" />
      <ul>
        <li v-for="item in filterPerson" :key="item.id">
          name:{{item.name}}--sex:{{item.sex}}
        </li>
      </ul>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            mes: "",
            person: [
              { id: 1, name: "Jay", sex: "男" },
              { id: 2, name: "JJ", sex: "男" },
              { id: 3, name: "Eson", sex: "男" },
              { id: 4, name: "Esjj", sex: "女" },
              { id: 5, name: "hello", sex: "女" },
            ],
          };
        },
        computed: {
          filterPerson() {
            return this.person.filter((item) => {
              return item.name.toLowerCase().includes(this.mes.toLowerCase());
            });
          },
        },
      });
    </script>
  </body>
</html>
